<template>
  <div class="selection" :style="style"></div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['dragStartPos', 'dragEndPos']),

    style() {
      const selection = {
        left: Math.min(this.dragStartPos.x, this.dragEndPos.x),
        right: Math.max(this.dragStartPos.x, this.dragEndPos.x),
        top: Math.min(this.dragStartPos.y, this.dragEndPos.y),
        bottom: Math.max(this.dragStartPos.y, this.dragEndPos.y),
      };
      return {
        width: `${selection.right - selection.left}px`,
        height: `${selection.bottom - selection.top}px`,
        left: `${selection.left}px`,
        top: `${selection.top}px`,
      };
    },
  },
};
</script>

<style scoped>
.selection {
  display: inline-block;
  position: absolute;
  border: 1px solid var(--vscode-charts-orange);
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
